<template>
    <div class="slider-wrapper">
        <div class="slider-control">
            <div class="year" @click="fnChangeIndex($event)">
                <ul>
                    <!-- <li>2013</li> -->
                    <!-- <li>2014.07</li> -->
                    <li>2014.07</li>
                    <li>2015.06</li>
                    <li>2016.08</li>
                    <li>2017.01</li>
                    <li>2017.02</li>
                    <li>2017.08</li>
                    <li>2017.09</li>
                    <li>2018.08</li>
                    <li>2018.09</li>
                    <li>2019.07</li>
                    <li>2019.09</li>
                    <li>2020.11</li>
                </ul>
                <div class="slider-describtion">
                    <!-- <div class="slider-desc-item">
                        <p class="desc">
                            掌上大学成立
                        </p>
                    </div> -->
                    <div class="slider-desc-item">
                        <p class="desc">
                            美国 solidworks 种子轮融资
                        </p>
                    </div>
                    <div class="slider-desc-item">
                        <p class="desc">
                            青松基金天使轮融资
                        </p>
                    </div>
                    <div class="slider-desc-item">
                        <p class="desc">
                            成立高校大数据研究院
                        </p>
                    </div>
                    <div class="slider-desc-item">
                        <p class="desc">
                            撰写高校第一个《高校新媒体蓝皮书》
                        </p>
                    </div>
                    <div class="slider-desc-item">
                        <p class="desc">
                            赛伯乐 A 轮融资
                        </p>
                    </div>
                    <div class="slider-desc-item">
                        <p class="desc">
                            召开“中国高校第一次新媒体行业峰会”
                        </p>
                    </div>
                    <div class="slider-desc-item">
                        <p class="desc">
                            杭州市雏鹰企业
                        </p>
                    </div>
                    <div class="slider-desc-item">
                        <p class="desc">
                            创始人张良玉获得福布斯中国30 Under 30
                        </p>
                    </div>
                    <div class="slider-desc-item">
                        <p class="desc">
                            掌上大学荣获“国家级高新企业”
                        </p>
                    </div>
                    <div class="slider-desc-item">
                        <p class="desc">
                            掌上大学CEO张良玉入选2019杭州大学生杰出创业人才
                        </p>
                    </div>
                    <div class="slider-desc-item">
                        <p class="desc">
                            掌上大学CEO 荣登《2019胡润under30s创业领袖》
                        </p>
                    </div>
                    <div class="slider-desc-item">
                        <p class="desc">
                            掌上大学CEO 被聘为第十二届中国大学生挑战杯创业导师
                        </p>
                    </div>
                </div>
            </div>
            <a
                id="silderPrev"
                href="javascript:;"
                class="slider-control-prev"
                @click="slider.prev()"
                ><i class="iconfont icon-jiantou"
            /></a>
            <a
                id="silderNext"
                href="javascript:;"
                class="slider-control-next"
                @click="slider.next()"
                ><i class="iconfont icon-jiantou icon-jiantou-reverse"
            /></a>
        </div>
        <div class="slider-images">
            <ul v-lazy-container="{ selector: 'img' }">
                <!-- <li>
                    <img
                        data-src="//cdn.zsdx.cn/wei/images/hire/home/2014.06.png"
                    />
                </li> -->
                <li>
                    <img
                        data-src="//cdn.zsdx.cn/wei/images/new_home/index/milestone-2014_06.png?v=1.0"
                    />
                </li>
                <li>
                    <img
                        data-src="//cdn.zsdx.cn/wei/images/new_home/index/milestone-2015_07.png?v=1.0"
                    />
                </li>
                <li>
                    <img
                        data-src="//cdn.zsdx.cn/wei/images/new_home/index/milestone-2016_07.png"
                    />
                </li>
                <li>
                    <img
                        data-src="//cdn.zsdx.cn/wei/images/new_home/index/milestone-2017_01.png"
                    />
                </li>
                <li>
                    <img
                        data-src="//cdn.zsdx.cn/wei/images/new_home/index/milestone-2017_02.png?v=1.0"
                    />
                </li>
                <li>
                    <img
                        data-src="//cdn.zsdx.cn/wei/images/new_home/index/milestone-2017_08.png"
                    />
                </li>
                <li>
                    <img
                        data-src="//cdn.zsdx.cn/wei/images/hire/home/2016.09.png"
                    />
                </li>
                <li>
                    <img
                        data-src="//cdn.zsdx.cn/wei/images/new_home/index/milestone-2018_08.png"
                    />
                </li>
                <li>
                    <img
                        data-src="//cdn.zsdx.cn/wei/images/hire/home/2018.09.png"
                    />
                </li>
                <li>
                    <img
                        data-src="//cdn.zsdx.cn/wei/images/new_home/index/milestone-2019_06.png"
                    />
                </li>
                <li>
                    <img
                        data-src="//cdn.zsdx.cn/wei/images/hire/home/ceo.jpg"
                    />
                </li>
                <li>
                    <img
                        data-src="//cdn.zsdx.cn/zsdx-website/2020/images/ceo2.png"
                    />
                </li>
            </ul>
        </div>
        <div class="slider-desc">
            <!-- <div class="slider-desc-item">
                <p class="title">
                    2013.04
                </p>
                <p class="desc">
                    成立
                </p>
            </div> -->
        </div>
    </div>
</template>

<script>
import Slider from '@/assets/js/slider'
export default {
    components: {},
    data() {
        return {
            slider: null
        }
    },
    mounted() {
        this.slider = new Slider('.slider-images', 3)
    },

    methods: {
        fnChangeIndex(e) {
            const index = e.target.dataset.index

            this.slider.setImageActiveByIndex(Number(index))
        }
    }
}
</script>

<style lang="less" scoped>
.slider {
    &-control {
        position: relative;

        .year {
            width: 605px;
            margin: 0 auto;
            overflow: hidden;
            ul {
                width: 999999px;
                position: relative;
                left: -103px;
                transition: all 0.3s ease-out;
                user-select: none;

                &::after {
                    content: '';
                    display: block;
                    clear: both;
                }

                li {
                    float: left;
                    width: 120px;
                    height: 36px;
                    margin: 0px 15px;
                    font-size: 30px;
                    font-family: BebasNeue-Regular, BebasNeue;
                    font-weight: 400;
                    color: rgba(220, 220, 220, 1);
                    line-height: 36px;
                    cursor: pointer;
                    &.cur {
                        margin: 0 21px;
                        color: #3f454b;
                        width: 155px;
                        height: 48px;
                        font-size: 40px;
                        font-family: BebasNeue-Regular, BebasNeue;
                        font-weight: 400;
                        color: rgba(255, 255, 255, 1);
                    }

                    &.sibling {
                        color: #dcdcdc;
                    }
                }
            }
            .slider-describtion {
                text-align: center;
                padding-top: 10px;
                padding-bottom: 30px;
                font-size: 16px;
                font-family: PingFangSC-Light, PingFang SC;
                font-weight: 300;
                color: rgba(255, 255, 255, 1);
            }
        }

        &-prev {
            position: absolute;
            top: 200px;
            left: 50%;
            transform: translate3d(-560px, 0, 0) rotate(180deg);
            transform-origin: 50% 50%;
            color: #999999;
            z-index: 1;

            .icon-jiantou {
                font-size: 42px;
                line-height: 1;
            }
        }

        &-next {
            position: absolute;
            top: 200px;
            left: 50%;
            transform: translate3d(536px, 0, 0);
            color: #999;
            z-index: 1;

            .icon-jiantou-reverse {
                font-size: 42px;
                line-height: 1;
                transform: totate(180deg);
            }
        }
    }

    &-images {
        position: relative;
        margin: 0 auto 30px;
        width: 480px;
        height: 280px;

        ul {
            display: block;
            width: 9999999px;
            transition: all 0.3s ease-out;
            transform: translateZ(0);
            zoom: 1;

            &::after {
                content: '';
                display: block;
                clear: both;
            }
        }

        li {
            float: left;
            position: relative;
            width: 125px;
            height: 350px;
            transition: all 0.3s ease-out;
            transform-origin: 50% 50%;

            &.cur {
                z-index: 200;

                img {
                    display: block;
                    opacity: 1;
                    transform: scale(1);
                }
            }

            &.sibling {
                z-index: 100;

                img {
                    display: block;
                    opacity: 0.8;
                    transform: scale(0.8);
                }
            }

            &.sibling2 {
                z-index: 10;

                img {
                    display: block;
                    opacity: 0.6;
                    transform: scale(0.6);
                }
            }

            img {
                position: absolute;
                left: -250px;
                width: 480px;
                height: 280px;
                transition: all 0.3s ease-out;
                opacity: 0;
                transform: scale(0.3);
            }
        }
    }

    &-desc {
        &-item {
            display: none;
            text-align: center;

            &.show {
                display: block;
            }

            .title {
                margin-bottom: 12px;
                font-size: 24px;
                line-height: 28px;
                color: #999999;
            }

            .desc {
                position: relative;
                margin: 0 auto;
                font-size: 14px;
                text-align: center;
            }
        }
    }
}
</style>
